<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Join in to Soro · Soro</title>
    <style type="text/css">

        body {
            width: 100%;
            min-width: 1000px;
        }


        header {
            padding: 40px 60px;
        }

        main {
            padding: 10px 60px 40px;
        }



        .logo {
            font-size: 35px;
            font-weight: bold;
        }

        .header_lockup {
            height: 50px;
        }

        .header_item1 {
            display: inline-block;
            padding: 0;
            height: 50px;
        }

        .header_item2 {
            display: inline-block;
            height: 50px;
            width: 800px;
            float: right;
            font-family: 'Lantinghei SC', 'STSong', serif;
            padding-top: 20px;

        }

        .top-list {
            float: right;
        }

        .top-list_item {
            float: left;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        /*上面是header*/
        /*footer {
            border-top-style: solid;
            border-width: thin;
            height: 100px;
            padding: 40px 60px;
        }*/
        footer {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            width: 100%;
            margin-right: auto;
            margin-left: auto;
            transition: transform .3s ease-in-out;
            border-top: 1px solid #ededed;
            background-color: #fff;
            letter-spacing: .5px;
            position: relative;
            z-index: 90;
            padding: 50px 60px;
        }

        .d-sm-flex {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex!important;
            flex-wrap: nowrap!important;
            justify-content: space-between!important;
        }

        .ps-footer__main {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        .p-div {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: block;
            min-height: 32px;
            margin-bottom: 30px;
        }

        .p-list {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            text-align: left;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            align-items: flex-start;
        }

        .p-list__item {
            -webkit-tap-highlight-color: transparent;
            --blue: #007bff;
            --indigo: #6610f2;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --red: #dc3545;
            --orange: #fd7e14;
            --yellow: #ffc107;
            --green: #28a745;
            --teal: #20c997;
            --cyan: #17a2b8;
            --white: #fff;
            --gray: #6c757d;
            --gray-dark: #343a40;
            --primary: #000;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-weight: 400;
            color: #212529;
            line-height: 2;
            font-size: 12px;
            letter-spacing: .5px;
            list-style: none;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            padding: 0 15px;
            white-space: nowrap;
            padding-left: 0;
        }

        .ps-footer__extra {
            padding-right: 35px;
        }



        /*上面是footer*/


        .f {
            -webkit-tap-highlight-color: transparent;
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.8;
            color: #868e96;
            font-family: "Montserrat", Arial, sans-serif;
            text-align: left !important;
            box-sizing: inherit;
            background-color: #fff !important;
            border-radius: 0.25rem !important;
            margin-top: 50px;
            padding: 60px;
            box-shadow: 1px 11px 68px -20px rgba(0, 0, 0, 0.75);
            width: 400px;

        }

        .tl {
            -webkit-tap-highlight-color: transparent;
            box-sizing: inherit;
            line-height: 1.1;
            color: #212529;
            font-size: 2rem;
            font-weight: 300 !important;
            margin-top: 0 !important;
            margin-bottom: 1.5rem !important;
            text-align: center !important;
        }

        .col {
            display: inline-block;
            -webkit-tap-highlight-color: transparent;
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.8;
            color: #868e96;
            font-family: "Montserrat", Arial, sans-serif;
            box-sizing: inherit;
            width: 100%;
            min-height: 1px;
            padding: 0 30px;
            -webkit-box-flex: 0;
            flex: 0 0 41.66667%;
            max-width: 41.66667%;
            position: relative;
            bottom: 60px;
            left: 150px;
            vertical-align: center;
        }

        .form-group {
            -webkit-tap-highlight-color: transparent;
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.8;
            color: #868e96;
            font-family: "Montserrat", Arial, sans-serif;
            text-align: left !important;
            box-sizing: inherit;
            margin-bottom: 1rem;
        }

        .form-control {
            -webkit-tap-highlight-color: transparent;
            box-sizing: inherit;
            touch-action: manipulation;
            font-family: inherit;
            overflow: visible;
            font-weight: 300;
            display: block;
            width: 100%;
            padding: 0.5rem 0.75rem;
            font-size: 1rem;
            line-height: 1.25;
            color: #495057;
            border-radius: 0.25rem;
            height: 50px !important;
            background: #f2f2f2;
            transition: .3s all ease;
            border: 1px solid #f2f2f2;
        }

        .btn {
            -webkit-tap-highlight-color: transparent;
            box-sizing: inherit;
            touch-action: manipulation;
            margin: 0;
            font-family: inherit;
            overflow: visible;
            -webkit-appearance: button;
            font-weight: 300;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            user-select: none;
            transition: all 0.15s ease-in-out;
            background-color: #1d82ff;
            border-color: #1d82ff;
            font-size: 1.25rem;
            line-height: 1.5;
            display: block;
            box-shadow: 0 15px 28px -5px rgba(29, 130, 255, 0.45);
            border-radius: 50px;
            padding: 0.5rem 40px;
            color: white;
            width: 85%;
        }

        .select-wrap {
            -webkit-tap-highlight-color: transparent;
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.8;
            color: #868e96;
            font-family: "Montserrat", Arial, sans-serif;
            text-align: left !important;
            box-sizing: inherit;
            position: relative;
        }

        .col1 {
            display: inline-block;
            padding: 50px 0 0 30px;
        }

        .picture-frame {
            background-image: url("../static/1-1-2副本-1-1920x1001.jpg");
            background-size: 960px 500px;
            width: 900px;
            height: 600px;
        }

        .email-div {
            width: 240px;
            display: inline-block;
            margin-right: 45px
        }

        .verify-div {
            width: 110px;
            display: inline-block;
        }

        .verify-div button {
            padding: 0 10px;
        }

    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <script type="text/javascript">
        $(document).ready(function () {
            var btn = $("#verify-btn");
            var email = $("#email");
            btn.click(function () {
                if (email.val().length < 4 || email.val().length > 32) {
                    alert("请输入正确的邮箱地址");
                } else {
                    var timer = null;
                    var time = 60;
                    btn.text(time + "s 后重发");
                    btn.attr("disabled", "true");
                    timer = setInterval(function () {
                        if (time > 0) {
                            time--;
                            btn.text(time + "s 后重发");
                        } else {
                            btn.removeAttr("disabled");
                            btn.text("发送验证码");
                            clearInterval(timer);
                        }
                    }, 1000);
                    $.ajax({
                        type: "post",
                        url: "/sendVerification",
                        data: {email: $("#email").val()},
                        dataType: "json"
                    });
                }
            });

        });
    </script>
</head>
<body>
<header>
    <div class="header_lockup">
        <div class="header_item1">
            <a class="logo">Soro</a></div>
        <div class="header_item2">
            <ul class="top-list">
                <li class="top-list_item" style="padding-right: 50px"><a href="/">首页</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/shop">产品</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/appointment">上门预约</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/about">关于我们</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/join">注册</a></li>
                <li class="top-list_item" style="padding-right: 50px"><a href="/cart">购物车</a></li>
                <li class="top-list_item" style="margin-right: 30px">
                    <a href="/personal" th:if="${session.username != null}" th:text="${session.username}">登录</a>
                    <a href="/login" th:if="${session.username == null}">登录</a>
                </li>
                <li class="top-list_item"><a href="/logout" th:if="${session.username != null}">退出</a></li>
            </ul>
        </div>
    </div>
</header>
<main>
    <div class="col1">
        <div class="picture-frame"></div>
    </div>
    <div class="col">
        <form action="/changing" class="f" method="post">
            <h2 class="tl">Soro</h2>
            <div class="form-group" th:if="${message}">
                <div th:text="${message}"></div>
            </div>
            <div class="form-group">
                <label>
                    <input type="text" class="form-control" placeholder=" Mobile" name="mobile" th:value="${mobile}">
                </label>
            </div>
            <div class="form-group">
                <div class="email-div">
                    <label>
                    <input type="text" class="form-control" placeholder="Email" id="email" name="email" th:value="${email}">
                    </label>
                </div>
                <div class="verify-div">
                    <button type="button" class="layui-btn layui-btn-primary verify-btn">发送验证码</button>
                </div>
            </div>
            <div class="form-group">
                <label>
                    <input type="text" class="form-control" placeholder=" 验证码" name="verification">
                </label>
            </div>
            <div class="form-group">
                <label>
                    <input type="password" class="form-control" placeholder=" NewPassword 8-16个字符" name="newPassword">
                </label>
            </div>
            <!--<div class="form-group">
                <div class="select-wrap">
                    <label>
                        <select class="form-control">
                            <option value="" selected="">Type</option>
                            <option value="">Basic</option>
                            <option value="">Business</option>
                            <option value="">Free</option>
                        </select>
                    </label>
                </div>
            </div>-->
            <div class="form-group">
                <input type="submit" class="btn" value="修改密码">
            </div>
        </form>
    </div>
</main>
<footer class="container-fluid ps-footer p-wrap">
    <div class="ps-header__slogan">美好宠物生活	Live with pet better</div>
    <div class="d-sm-flex justify-content-sm-between flex-nowrap">
        <div class="ps-footer__main">
            <div class="p-div">
            </div>
            <nav class="p-div"><ul class="p-list">
                <li class="p-list__item">
                    <a href="/">首页</a>
                </li>
                <li class="p-list__item">
                    <a href="/shop">产品</a>
                </li>
                <li class="p-list__item">
                    <a href="/appointment">上门预约</a>
                </li>
                <li class="p-list__item">
                    <a href="/about">关于我们</a>
                </li>
                <li class="p-list__item">
                    <a href="/join">注册</a>
                </li>
                <li class="p-list__item">
                    <a href="/cart">购物车</a>
                </li>
                <li class="p-list__item ps-lang">
                    <a href="/personal">个人中心</a>
                </li>
            </ul> </nav>
            <div><a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备15057691号-2</a> Copyright © 2020 Soro Co.,Ltd. 瘦肉宠物用品（广东）有限公司</div>
        </div>
        <div class=" ps-footer__extra">
            <div class="p-div"></div>
            <div class="p-div"></div>
            <div class="p-div" style="float: bottom">服务热线：+86 400-920-0674<span class="ps-flag"></span></div>
        </div>
    </div>
</footer>
</body>
</html>